const { default: styled } = require("styled-components");

const RoomList = styled.div`
  margin: 50px auto;
  /* width: 1024px; */
  .title {
    padding-left: 8px;
    h4,
    h6 {
      line-height: 1.8;
    }
    h4 {
      font-size: 20px;
      font-weight: 600;
    }
    .dests {
      display: flex;
      flex-wrap: nowrap;
      .dest-item {
        display: block;
        flex-shrink: 0;
        margin-right: 10px;
        padding: 10px 30px;
        cursor: pointer;
        // 禁止文字换行
        white-space: nowrap;
        user-select: none;
        border: 1px solid ${(props) => props.theme.color.Vanishing};
        border-radius: 3px;
        &:hover {
          ${(props) => props.theme.shadow.typeOne}
        }
        &.active {
          background-color: ${(props) => props.theme.color.Subcalor};
          color: white;
          font-weight: 600;
          &:hover {
            box-shadow: 0px 3px 4px 0.3px rgba(0, 0, 0, 0);
          }
        }
      }
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }
  .footer{
    margin: 10px 0;
    padding-left: 8px;
    align-items: center;
    display: flex;
    color:#00848A;
    font-size: 20px;
    user-select: none;
    cursor: pointer;
    font-weight: 600;
    &:hover{
      color:#00958B;
      text-decoration: underline;
    }
  }
`;

export default RoomList;
